<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title id="title">修德抄经堂</title>
	<link rel="stylesheet" type="text/css" href="../bower_components/mui/dist/css/mui.css">
	<link rel="stylesheet" type="text/css" href="../css/jingshujieshao.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link rel="stylesheet" type="text/css" href="../css/full.css">
	<script src="../bower_components/mui/dist/js/mui.min.js"></script>
	<script src="../bower_components/jquery/dist/jquery.js"></script>
</head>
<body>
<div id="mcover" style="display:none;">
	<img src="../img/guide.png" />
</div>
<div class="page">
	<div class="content">
		<a href="./search.html">
			<div class="sousuo">
				<span><img src="../img/bore/search.png" class="cover"></span>
				<span>输入版本信息或关键字</span>
			</div>
		</a>

		<!--
            经书介绍区域
        -->
		<div id="main">

		</div>

		<!--
            滚动区域
        -->
		<div id="scroll">
			<img class="tishi" src="../img/benxin/next.png">
			<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="height: 120px;">
				<div class="mui-scroll" id="version" >

				</div>
			</div>
		</div>

		<!--
            三个图标
        -->
		<ul class="btn">
			<a href="javascript:;" id="write"><li>
				<img src="../img/benxin/write.png">
				<p>抄写</p>
			</li></a>
			<a href="javascript:;" id="read"><li>
				<img src="../img/benxin/read.png">
				<p>阅读</p>
			</li></a>
			<a href="javascript:;" id="fenxiang"><li>
				<img src="../img/benxin/fenxiang.png">
				<p>分享</p>
			</li></a>
		</ul>
	</div>
</div>
</body>
<script src="../js/common.js"></script>
<script src="../js/resLoader.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>

    $(function () {

        var html = '';
        var bookId = getUrlParam('id');
        var editionId = parseInt(getUrlParam('edition_id'));
        localStorage.setItem('bookID',bookId);
        //经书详情展示
        $.ajax({
            url: '/fe/sutra/'+bookId+'/detail',
            success: function (data) {
                var data = data.data;
                html = '<div id="main-top"><img class="shuming" src="'+data.cover_url+'">' +
                    '<div class="jieshao">' +
                    '<p class="name">'+data.name+'</p>' +
                    '<p class="zhengwen">'+data.desc+'</p>' +
                    '</div>' +
                    '</div>' +
                    '<div style="clear: both;"></div>' +
                    '<div class="xingshu">' +
                    '<p class=\'name\'>'+data.name+'</p>' +
                    '<p class="zhengwen">'+data.desc+'</p>' +
                    '</div>';
                $('#main').append(html);
            },
            error: function (error) {
                console.log(error)
            }

        });
        //经书版本分类展示
        var version = '';
        $.ajax({
            url: '/fe/sutra/'+bookId+'/edition/list',
            data: {
                "limit": 100,
                "offset": 0,
            },
            async: false,
            success: function (data) {
                var data = data.data;
                var activeIndex = 0;

                for(var i=0,len=data.length;i<len;i++) {
                    version += '<a class="mui-control-item" data-id="'+data[i].id+'" data-name="'+data[i].name+'" href="#'+data[i].id+'" style="display:inline-block;">' +
                        '<img src="'+data[i].cover_url+'">' +
                        '</a>'
                    if(data[i].id == editionId) {
                        activeIndex = i;
                    }
                };
                $('#version').append(version);
                $('#version a').eq(activeIndex).addClass('mui-active');

            }
        });
        //根据选择的经书版本进行相应的跳转
        var selectId;
        if (editionId) {
            selectId = editionId;
        }
        else {
            selectId = $('#version a').eq(0).data('id');
        }
        var write = $('#write');
        var read = $('#read');
        var isHide = false;
        $('.mui-control-item').each(function (index) {
            $(this).on('tap', function(i){
                selectId = $(this).data('id');
                if (!isHide) {

                    isHide = true;
                }

                changeText()
            });
        });


        function changeText() {
            $.ajax({
                url: '/fe/sutra/edition/'+selectId+'/detail',
                success: function (data) {
                    var data = data.data;
                    var text = '<p class=\'name\'>'+data.name+'</p>' +
                        '<textarea class="zhengwen" readonly="readonly">'+data.desc+'</textarea>' ;
                    $('#main').find('.xingshu').empty().append(text);
                }
            })
        }
        changeText();

        write.click(function () {
            location.href = 'caoxuexuanze.html?id='+selectId+'';
            localStorage.setItem('versionId',selectId);
        });
        read.click(function () {
            location.href = 'read.html?id='+selectId+'';
        });

        var fenxiang = $('#fenxiang');
        fenxiang.click(function () {
            $("#mcover").css("display","block");
        })
        $("#mcover").click(
            function(){
                $("#mcover").css("display","none");  // 点击弹出层，弹出层消失
            }
        )

    });

</script>
</html>